<script setup>
import { ref } from "vue"
// const acl = ref([]);
// 获取本地存储的侧边栏数据
const acl = JSON.parse(localStorage.getItem("acl"));
// console.log(acl);


</script>

<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px">
                <el-menu router default-active="2" class="el-menu-vertical-demo">
                    <el-menu-item :index="item.auth_path" v-for="item in acl" :key="item.id" v-show="item.children.length == 0">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>{{ item.auth_name }}</span>
                    </el-menu-item>
                    <el-sub-menu :index="item.auth_path" v-for="item in acl" :key="item.id" v-show="item.children.length != 0">
                        <template #title>
                            <el-icon>
                                <User />
                            </el-icon>
                            <span>{{ item.auth_name }}</span>
                        </template>
                        <el-menu-item :index="child.auth_path" v-for="child in item.children" v-show="child.is_nav == 1" :key="child.id">{{
                            child.auth_name }}</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header>Header</el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
  

<style scoped lang="scss">
.common-layout {
    width: 100%;
    height: 100%;

    .el-container {
        height: 100%;
    }
}

.el-header {
    background-color: #3d8e86;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.el-aside {
    background-color: #87c0ca;

}

.el-main {
    background-color: #206864;
}
</style>